<template>
  <div class="list-view">
    <div class="content-item" v-for="(item, index) in items" :key="item.id">
      <div style="padding: 0 30px">
        <div class="item-header">
          <div class="item-title-wrapper">
            <div class="item-checkbox">
              <el-checkbox
                :value="selectedIds.includes(item.id)"
                @change="(val) => handleSelect(val, item.id)"
              ></el-checkbox>
            </div>
            <div class="item-title" >
              <div @click="handleItemClick(item, index)">
                《军事信息资源分类法》特色和应用
              </div>
              <div class="Claim" v-if=" libraryConfig.currentLibrary =='2'" @click="handClaim(item)">
                <div class="tub">
                       <i class="iconfont icon-renling"></i>
                </div>
                  认领
              </div>
             
            </div>
          </div>
          <div class="item-action">
            <i class="iconfont icon-shoucangliang"></i>
            收藏
          </div>
        </div>
        <div class="item-meta">
          <div class="meta-item">时间：<span>敏杰许东昌</span></div>
          <div class="gang">|</div>
          <div class="meta-item">来源： <span>敏杰许东昌</span></div>
          <div class="gang">|</div>
          <div class="meta-item">作者： <span>敏杰许东昌</span></div>
        </div>
        <div class="item-ss">
          机构：<span>中国电子科技集团公司第五十二研究所</span>
        </div>
        <div class="item-ss">
          视频简介：<span
            >针对军事训练计划手工拟制复杂、耗时长的问题,提出一种基于自适应遗传算法的军事训练计划智能编排方法。通过分析军事训练计划编排涉及的要素及编排特点,将军事训练计划拟制问题抽象为数学模型,基于自适应遗传算法的原理完成了军事训练计划智能编排算法的设计,并采用面向对象的开发方法实现产生的今年将参加的</span
          >
        </div>
        <div class="item-ss">关键词：<span>军事训练、训练计划</span></div>
      </div>

      <div class="bt" v-if="type == '我的收藏'">
        <div class="yu">收藏时间：2025-03-12</div>
      </div>
      <div class="bt" v-else-if="type == '我的浏览'">
        <div class="yu">浏览时间：2025-03-12</div>
      </div>
        <div class="bt" v-else-if="type == '我的下载'">
        <div class="yu">下载时间：2025-03-12</div>
      </div>
      <div class="bt" v-else>
        <el-button type="primary" icon="iconfont icon-wenjianyulan" plain
          >在线阅读</el-button
        >
        <el-button type="primary" icon="iconfont icon-xiazai" plain
          >下载</el-button
        >
      </div>
    </div>
    <Claim ref="Claimrfe" :huangitem="huangitem"></Claim>
  </div>
</template>

<script>
import { libraryConfig } from '@/Config/projectsConfig'
import Claim from "@/components/Claim.vue";
export default {
  name: "ResultList",
  components: { Claim },
  props: {
    items: {
      type: Array,
      required: true,
    },
    selectedIds: {
      type: Array,
      required: true,
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      libraryConfig,
      huangitem: {}
    };
  },
  methods: {
    handClaim(irem) {
      this.huangitem = irem;
      this.$refs.Claimrfe.openFeedbackDialog();
    },
    handleSelect(checked, id) {
      this.$emit("select", checked, id);
    },
    handleItemClick(item, index) {
      this.$nextTick(() => {
        if (index == 0) {
          this.$router.push({
            path: "/DetailsPage",
            query: {
              id: item.id,
            },
          });
        } else {
          this.$router.push({
            path: "/BookDetailsPage",
            query: {
              id: item.id,
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Claim{
  margin-left: 12px;
  display: flex;
  align-items: center;
  font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
width: 67px;
height: 24px;
border-radius: 12px;
  .tub{
    width: 24px;
height: 24px;
background: #C1C1C1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 6px;
  }
  &:hover{
   background: linear-gradient( 90deg, #FFBA77 0%, #EA6207 100%);
    .tub{
   background:transparent;

    }
  }
}
.yu {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
}
.list-view {
  display: flex;
  flex-direction: column;
}

.content-item {
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  // padding: 20px 44px 0px 30px;
  padding-top: 44px;
  margin-bottom: 20px;
  transition: all 0.2s;

  &:hover {
    border-color: #e0e7ff;
    background-color: #f9faff;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .item-title-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .item-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 22px;
      color: #333333;
      line-height: 30px;
       display: flex;
    }

    .item-action {
      i {
        font-size: 18px;
        color: #999999;
      }

      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
    }
  }

  .item-meta {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .meta-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #333333;

      span {
        font-size: 18px;
        color: #666666;
      }
    }

    .gang {
      padding: 0 20px;
    }
  }

  .item-ss {
    margin-top: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    span {
      color: #666666;
    }
  }

  .bt {
    margin-top: 31px;
    border-top: 1px solid #e4e4e4;
    padding: 20px 30px;
  }
}
</style>
